<template>
  <component v-if="type" :is="type" :index="index">
    <template #title>
      <span class="x-menu-item-iteration-title" :data-layer="layer">
        <el-icon v-if="icon" :size="16"><component :is="icon" /></el-icon>
        <span>{{ title }}</span>
      </span>
    </template>

    <x-menu-item-iteration
      v-for="item in children"
      v-bind="item"
      :key="item.index"
      :layer="layer + 1"
    ></x-menu-item-iteration>
  </component>
</template>

<script setup name="XMenuItemIteration">
// 菜单项迭代器
const props = defineProps({
  type: String, // 子组件名，如'el-sub-menu', 'el-menu-item', 'el-menu-item-group'
  index: [String, Number], // 唯一id
  title: String, // 标题文案
  icon: String, // icon组件名
  layer: {
    // 层级
    type: Number,
    default: 0,
  },
  children: Array, // 子数据
})
</script>

<style lang="scss" scoped>
.x-menu-item-iteration-title {
  display: flex;
  align-items: center;
  .el-icon {
    margin-right: 6px;
  }
  &[data-layer='1'] {
    padding-left: 20px;
  }
  &[data-layer='2'] {
    padding-left: 40px;
  }
}
</style>
